<template>
	<view class="my">
		<view class="head">
			<view class="info">
				<view class="icon">
					<image src="../../static/images/index/gengduo.png" mode=""></image>
				</view>
				<view class="name">小肥猫</view>
			</view>

			<view class="point">
				<view class="list">
					<view class="item">
						<view>123</view>
						<view class="text">足迹</view>
					</view>
					<view class="item">
						<view>66</view>
						<view class="text">关注</view>
					</view>
					<view class="item">
						<view>22</view>
						<view class="text">收藏</view>
					</view>
					<view class="item">
						<view>88</view>
						<view class="text">优惠券</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="order mx-2 mt-2 rounded shadow">
				<view class="item" v-for="(item, index) in orderList" :key="index" @click="handleMy(item)">
					<image :src="item.url"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>

			<!-- 余额卡片 -->
			<view class="mx-2 bg-white mt-2 rounded shadow">
				<view class="flex flex-column p-3">
					<view class="flex align-center">
						<view class="flex flex-column">
							<view class="font-sm text-muted">可提现</view>
							<view class="font-lg font-weight-bold">0</view>
						</view>
						<view @click="goTowithdraw" class="ml-auto ry-btn" :style="{background:bgColor}">立即提现</view>
					</view>
					<view class="flex mt-5 mb-2">
						<view class="flex flex-1 flex-column justify-center align-center" hover-class="bg-hover-light"
							@click="goToPage('subuser')">
							<view class="font-sm font-weight-bold">0</view>
							<view class="font-small text-light-muted mt-1">直属下级(人)</view>
						</view>

						<view class="flex flex-1 flex-column justify-center align-center" hover-class="bg-hover-light">
							<view class="font-sm font-weight-bold">0</view>
							<view class="font-small text-light-muted mt-1">待结算(元)</view>
						</view>

						<view class="flex flex-1 flex-column justify-center align-center" hover-class="bg-hover-light">
							<view class="font-sm font-weight-bold">0</view>
							<view class="font-small text-light-muted mt-1">累计提现(元)</view>
						</view>
					</view>
				</view>
			</view>

			<view class="basisList">
				<view class="item" @click="goToPage('address')">
					<text>收货地址</text>
					<uni-icons color="#B9B9B9" type="right" size="16"></uni-icons>
				</view>
				<view class="item" @click="linkMe()">
					<text>联系作者</text>
					<uni-icons color="#B9B9B9" type="right" size="16"></uni-icons>
				</view>
				<view class="item" @click="goToPage('about')">
					<text>关于我们</text>
					<uni-icons color="#B9B9B9" type="right" size="16"></uni-icons>
				</view>
				<!-- <view class="item">
					<text>充值中心</text>
					<uni-icons custom-prefix="iconfont" color="#B9B9B9" type="right" size="16"></uni-icons>
				</view>
				<view class="item">
					<text>邀请有礼</text>
					<uni-icons custom-prefix="iconfont" color="#B9B9B9" type="right" size="16"></uni-icons>
				</view>
				<view class="item">
					<text>超级拼团</text>
					<uni-icons custom-prefix="iconfont" color="#B9B9B9" type="right" size="16"></uni-icons>
				</view> -->
				<!-- <view class="item">
					<text>设置中心</text>
					<uni-icons custom-prefix="iconfont" color="#B9B9B9" type="right" size="16"></uni-icons>
				</view> -->
			</view>
		</view>

		<view class="flex flex-column justify-center align-center mt-5">
			<view class="font-sm text-light-muted">EVA商城开源</view>
			<view class="font-smaller text-light-muted">Version 1.0.0</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	const orderList = reactive([{
			name: '待付款',
			url: '../../static/images/order/dfk.png'
		},
		{
			name: '待发货',
			url: '../../static/images/order/dfh.png'
		},
		{
			name: '已发货',
			url: '../../static/images/order/dsh.png'
		},
		// { name: '售后', url: '../../static/images/order/sh.png' },
		{
			name: '全部订单',
			url: '../../static/images/order/qbdd.png'
		}
	]);

	const handleMy = (item) => {
		if (item.name === "全部订单") {
			uni.navigateTo({
				url: "../myOrder/myOrder?data=5"
			})
		} else if (item.name === "待付款") {
			uni.navigateTo({
				url: "../myOrder/myOrder?data=0"
			})
		} else if (item.name === "待发货") {
			uni.navigateTo({
				url: "../myOrder/myOrder?data=2"
			})
		} else if (item.name === "已发货") {
			uni.navigateTo({
				url: "../myOrder/myOrder?data=3"
			})
		}
	}

	const goToPage = (pageName) => {
		uni.navigateTo({
			url: `../${pageName}/${pageName}`
		})
	}

	const linkMe = () => {
		goToImage("http://cdn.unhejing.cn/uploads/20220907/a65afdfaa4bf2123a4c974f507546f11.jpg");
	}
	
	const goToImage = (imagePath)=>{
			uni.previewImage({
				urls: [imagePath],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		}
</script>

<style lang="scss" scoped>
	@import '../../static/css/public.scss';

	.my {
		.head {
			background-color: #FD4E4C;
			padding-bottom: 120rpx;

			.info {
				display: flex;
				align-items: center;
				padding-top: 10rpx;
				padding-bottom: 30rpx;
				padding: 0 40rpx;

				.icon {
					border-radius: 50%;
					border: solid 8rpx #FF9D8E;
					@include wh(82rpx, 82rpx);

					image {
						@include wh(100%, 100%);
					}
				}

				.name {
					@include sc(30rpx, #fff);
					padding-left: 20rpx;
				}
			}

			.point {
				padding-top: 40rpx;

				.list {
					display: flex;

					.item {
						display: flex;
						flex-direction: column;
						text-align: center;
						flex: 1;
						position: relative;

						&::after {
							content: '';
							position: absolute;
							right: 0;
							top: 50%;
							transform: translate(0, -50%);
							width: 0;
							height: 46rpx;
							border: 1rpx solid #FFACA2;
						}

						&:last-child {
							&::after {
								border: none;
							}
						}

						view {
							@include sc(30rpx, #fff);
						}
					}
				}
			}
		}

		.bottom {
			min-height: 400rpx;
			margin-top: -80rpx;

			.order {
				// border-radius: 16rpx;
				background-color: #fff;
				// margin: 0 25rpx;
				display: flex;

				.item {
					padding-top: 66rpx;
					padding-bottom: 43rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					flex: 1;


					image {
						@include wh(41rpx, 41rpx);
					}

					text {
						padding-top: 26rpx;
						@include sc(26rpx, #333);
					}
				}
			}

			.basisList {
				margin-top: 20rpx;
				background-color: #fff;

				.item {
					@include sc(28rpx, #333);
					border-bottom: solid 1rpx #F6F6F6;
					padding: 30rpx 35rpx;
					@include fja();
				}
			}
		}
	}
</style>
